<template>
  <div class="home">
    <van-nav-bar title="列表" left-text="购物车"
    @click-left="clickLeft">
      <template #right>
       <van-icon name="arrow-up" />
      </template>
    </van-nav-bar>
    <div class="list_container">
      <div v-for="(item,index) in listItems"
      :key="index"
      class="list_item_container">
        <img :src="item.mainPic"/>
        <div>{{item.title}}</div>
        <div>{{item.originalPrice}}</div>
        <div @click="onClick(item)">
          <van-icon name="shopping-cart-o" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  components: {
    
  },
  computed:{
    listItems:function(){
      return this.$store.state.listItems
    }
  },
  methods:{
    onClick(item){
      // window.console.log(item)
      this.$store.dispatch("ADD_ITEM_TO_CART",item)
    },
    clickLeft(){
      this.$router.push("Cart")
    }
  },
  mounted(){
    this.$store.dispatch("GET_LIST_DATA")
  }
}
</script>

<style scoped>
.list_container
{
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.list_item_container
{
  width: 40%;
  height: 240px;
  border: 1px solid red;
  margin: 10px;
}

.list_item_container img
{
  width: 100%;
}
</style>
